<template>
	<view class="login-wrapper">
		<view class="login-form">
			<u-form :model="form" ref="uForm" style="padding-top: 160rpx;">
				<view class="u-flex u-row-between">
					<text class="u-font-40">登录</text>
					<text v-if="form.LoginType == 1" style="color: #2979FF;" @tap="form.LoginType = 2">验证码登录</text>
					<text v-if="form.LoginType == 2" style="color: #2979FF;" @tap="form.LoginType = 1">账号密码登录</text>
				</view>
				<!-- <view class="u-flex u-col-center u-p-b-40 u-p-t-40"><u-avatar style="margin: 0 auto;" :size="160"></u-avatar></view> -->
				
				<block v-if="form.LoginType == 1">
					<u-form-item left-icon="phone"><u-input v-model="form.Account" placeholder="请输入您的账号"></u-input></u-form-item>
					<u-form-item label="" left-icon="lock"><u-input v-model="form.PassWord" placeholder="请输入密码" type="password"></u-input></u-form-item>
				</block>
				
				<block v-if="form.LoginType == 2">
					<u-form-item left-icon="phone"><u-input v-model="form.Phone" placeholder="请输入您的手机号"></u-input></u-form-item>
					<u-form-item label="" left-icon="lock">
						<u-input v-model="form.Code" placeholder="请输入验证码" ></u-input>
						
						<u-button :disabled="showCountDown" type="warning" size="mini" class="u-m-l-10" @tap="getSms">获取验证码
							
							<block v-if="showCountDown">
								(<u-count-down @end="onCountDownEnd"  bg-color="transparent" color="#fff" ref="countDown" :autoplay="false" :timestamp="countDown" :show-days="false" :show-hours="false" :show-minutes="false"></u-count-down>)
							</block>
						</u-button>
					</u-form-item>
				</block>
				
				<u-button class="login-btn" @click="submit">登录</u-button>
			</u-form>
		</view>
	</view>
</template>
<script>
import * as qiniu from 'qiniu-js';

export default {
	data() {
		return {
			form: {
				Account: '',
				PassWord: '',
				Phone: '',
				Code: '',
				LoginType: 1,
				OpenId: '',
				JumpUrl: this.$getH5Url()
			},
			value: false,
			areaCode: [],
			countDown: 59,
			showCountDown: false
		};
	},
	
	onLoad() {
		uni.setNavigationBarTitle({
			title: "温暖改造家"
		})
	},

	methods: {
		onCountDownEnd() {
			this.showCountDown = false;
			this.countDown = 59
		},
		
		toForgotPasswordPage() {
			this.$u.route({
				url: '/pages/personal/forgotPassword'
			})
		},
		
		getSms() {
			if(!this.form.Phone) {
				this.$u.toast('请输入手机号')
				return false;
			}
			
			this.showCountDown = true;
			this.$nextTick(function(){
				this.$refs.countDown.start()
			})
			
			
			
			this.$u.api.getSms({
				Phone: this.form.Phone
			}).then(res => {
				const { ResultCode, ResultMessage } = res;
				if(ResultCode == 1) {
					this.$u.toast(ResultMessage)
				}
			})
		},
		
		onChange(files, file) {
		},
		cityChange(e) {
			console.log(this.areaCode);
			// this.area = e.province.label + e.city.label + e.area.label
		},

		submit: function() {
			// uni.reLaunch({
			// 	url: '/pages/home/index'
			// })
			// return false
			
			this.$u.api.userLogin(this.form).then(res => {
				const {
					ResultCode,
					ResultTime,
					ResultMessage,
					ManagerInfo,
					RightsList
				} = res;
				if (ResultCode === 1) {
					this.$u.vuex('vuex_user', ManagerInfo);
					location.href = ResultMessage
					// uni.reLaunch({
					// 	url: '/pages/home/index'
					// })
					return false;
				}
			})
		}
	}
}
</script>

<style>

</style>

<style lang="scss" scoped>
.login-wrapper {
	padding: 174rpx 30rpx 0 30rpx;
	background: url(@/static/images/login.jpg);
	height: 100vh;

	.login-form {
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 7rpx 1rpx rgba(12, 6, 9, 0.07);
		border-radius: 12rpx;
		padding: 0 50rpx 80rpx;
		font-size: 30rpx;

		.login-btn {
			background-color: #ff7a23;
			color: #ffffff;
			border-radius: 45rpx;
			margin-top: 65rpx;
		}
	}

	.login-form {
		width: 684rpx;
		margin: 0 auto;
		height: 738rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 7rpx 1rpx rgba(12, 6, 9, 0.07);
		border-radius: 12rpx;
		padding: 0 50rpx;

		.login-btn {
			background-color: #ff7a23;
			color: #ffffff;
			border-radius: 45rpx;
			margin-top: 65rpx;
		}
	}
}
</style>
